<template>
	<view class="nav-li" :class="`bg-${color}`" style="display: inline-block;overflow: hidden;">
		<view class="nav-title">{{title}}</view>
		<view class="nav-name">{{name}}</view>
		<text :class="`cuIcon-${icon}`"></text>
	</view>
</template>
<script setup>
	const app = getApp();
	import colorList from '../../lib/color.js';
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		title:{
			type:String
		},
		name:{
			type:String
		},
		icon:{
			type:String,
			default:''
		},
		color:{
			type:String,
			default:'blue',
			validator(val){
				let flag = false;
				for(var ele of colorList){
					if(ele.name == val){
						//console.log(ele)
						flag = true;
					}
				}
				if(!flag){
					uni.$emit('component-props-validator','[c-nav-item]组件[color]参数错误');
				}
			}
		}
	})
</script>
<style>
</style>
